<template>
    <div>
        <!-- 底部的tababr -->
        <van-tabbar v-model="active" route placeholder>
            <van-tabbar-item to="/home" icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item to="/cart" icon="shopping-cart-o">购物车</van-tabbar-item>
            <van-tabbar-item :to="islogin ? '/user' : '/login'" :icon="islogin ? 'user-circle-o' : 'user-o'">{{ islogin ?
                '我的' : '登录'
            }}</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
// 利用辅助函数将vuex中的userid 映射到当前组件自身的this 实例上
import { mapState } from 'vuex';

export default {
    data() {
        return {
            active: 0, // 选中的下标
            username: '',
            islogin: localStorage.getItem('token') ? true : false
        }
    },
    computed: {
        ...mapState(['userid'])
    },
    created() {
        // console.log('apptabbar');
        // console.log('this-apptarbar', this);
    },
    watch: {
        // 思路: 监听vuex仓库中的userid的变化
        userid(newvalue) {
            // console.log('userid', newvalue);
            if (newvalue) {
                // 说明不是空字符串, 说明已经登录了
                this.islogin = true
            } else {
                this.islogin = false
            }
        }
    }
}
</script>
<style scoped></style>